<template>
	<view>
		<view style="box-sizing: border-box;padding: 20rpx;" v-if="loading">
			<ls-skeleton :skeleton="skeleton" :loading="loading"></ls-skeleton>
		</view>
		<view class="list" v-show="!loading">
			<view class="list-item" v-for="it in list" :key="it.id" @click.stop="toDetail(it.id)">
				<view class="list-item-btn" v-if="false">内容管理</view>
				<view class="list-item-t">
					<!-- <image class="list_item-img" :src="it.user.head + '?imageView2/1/w/80/h/80'"
						@click.stop="toOhter(it.business_card_id)"></image> -->
						<view class="list_item-img" @click.stop="toOhter(it.business_card_id)">
							<identityAvatarVue :identity="it.circle_host" :avatar="it.user.head + '?imageView2/1/w/80/h/80'"/>
						</view>
						
					<view class="list_item-header">
						<view class="list_item-header-h">
							<view class="list_item-header-h-l">
								<view class="list_item-header-h-name">
									{{ it.user.nickname }}
									<image :src="ossUrl + `/static/setting/${it.user.sex === '女' ? '7' : '6'}.png`"
										mode="">
									</image>
									<image :src="ossUrl + '/static/image/vip/2.png'" mode="" v-if="it.user.vip === 1"
										style="margin-left: 10rpx;margin-top: 2rpx;"></image>
									<image :src="u" mode="" style="border-radius: 50%;margin-left: 10rpx;"
										v-for="u in it.Icon"></image>
								</view>
								<!-- <view class="list_item-header-h-address">
									<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
									{{ it.address || '' }}
								</view> -->
							</view>
							<view class="list_item-header-h-r">
								{{ it.user.name }}
							</view>
						</view>
						<view class="list_item-header-time">
							<view class="list_item-header-h-address">
								<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
								{{ it.address || '' }}
							</view>
							<!-- <text style="font-size: 22rpx;">球龄：{{ it.user.years + '年' || '' }}</text> -->
							<!-- 	<text style="margin-left: 30rpx;">{{$u.timeFormat(it.add_time, 'yyyy年mm月dd日')}}</text> -->

						</view>
					</view>
				</view>


				<view class="list-item-content" @click.stop="toDetail(it.id)">
					<rich-text :nodes="replaceEmoji(it.content)"></rich-text>
				</view>
				<!-- v-if="$getIsImage(item) === 1"-->
				<!-- 视频 -->
				<view class="list-video" @click.stop
					v-if="it.upload.length > 0 ? $getIsImage(it.upload[0]) === 2 : false">
					<videoVue :src="it.upload[0]" :uniqueKey="'video-' + it.id" @play="() => play(it)" :ref="'videoVue' + it.id"/>
				</view>
				<!-- 图片 -->
				<view class="course" v-else>
					<view class="course-list" @click.stop>
						<view class="course-list-item" v-for="(item, index) in it.upload" :key="item">
							<template v-if="index < 9">
								<view class="course-list-item-header">
									<image :src="item + '?imageView2/1/w/152/h/92'"
										class="course-list-item-header-video" @click.stop="getPrevImg(it.upload, item)"
										mode="aspectFill" :show-menu-by-longpress="true"></image>
									<!-- 	<image :src="ossUrl + `/static/index/播放.png`" mode=""
		    class="course-list-item-header-play"></image> -->
									<view class="realShooting-nums" v-if="index === 8">
										共{{ getImgCount(it.upload) }}张
									</view>
								</view>
							</template>

						</view>
					</view>
				</view>
				<!-- 约球 -->
				<view class="list-item-activity" v-if="it.reservation && it.type == 3">
					<view class="list-item-activity-crad">
						<view class="list-item-activity-crad-item" @click.stop="opencompany(it)">
							<text style="width: 60rpx;">地址</text>：<text style="flex: 1;font-weight: unset;">{{ it.reservation.address }}</text>
						</view>
						<view class="list-item-activity-crad-item">
							<text>开始时间</text>：{{ it.reservation.event_date }} {{ it.reservation.start_time }}
						</view>
						<view class="list-item-activity-crad-item"
							v-if="it.reservation.type == 1 && it.reservation.actitveEndTime">
							<text>报名结束时间</text>：{{ it.reservation.actitveEndTime }}
						</view>
						<view class="list-item-activity-crad-item"
							v-if="it.reservation.type == 1 && it.reservation.actitveEndTime">
							<text>倒计时</text>：
							<!-- it.reservation.event_date + ' ' + it.reservation.end_time -->
							<countDownVue :time="getRemainingTimeToTimestamp(it.reservation.actitveEndTime)" />
						</view>
						<view class="list-item-activity-crad-item" @click.stop="setPhone(it.reservation.contact_info)">
							<text>手机号</text>：{{ it.reservation.contact_info || '' }}
						</view>
						<view class="list-item-activity-crad-item">
							<text>需报名人数</text>：{{ it.reservation.max_participants || 0 }}人
						</view>
						
						
						<view class="list-item-activity-crad-item" v-if="it.reservation.minUser">
							<text>最低举办人数</text>：{{it.reservation.minUser || 0}}人
						</view>
						
						<view class="list-item-activity-crad-item" v-if="it.reservation.price">
						   <text>单人费用</text>：{{it.reservation.price || 0}}元
						</view>
						
					</view>
					<view class="list-item-activity-people">
						<view class="list-item-activity-people-title" style="font-weight: bold;">报名表：</view>
						<!-- 看过 -->
						<view class="nums" @click.stop="toPeople(it.id)">
							<view class="nums-img">
								<image :src="item" mode="" v-for="item in it.head" style="border-radius: 50%;">
								</image>
							</view>
							<view class="nums-tx">等{{ it.count }}人已报名</view>
						</view>
					</view>
					<!--{{whetherItTimedOut(it, '2025-02-16 14:36')}} {{it.timeOut}}-->
					<view class="list-item-activity-btn-cancle" v-if="it.reservation.type == 2"
						style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
						已取消
					</view>
					<template v-else>
						<!--<view class="list-item-activity-btn"-->
						<!--	v-if="getRemainingTimeToTimestamp(it.reservation.actitveEndTime) > 0 && it.reservation_type != 1"-->
						<!--	@click.stop="submit(it.id)">-->
						<!--	点击报名-->
						<!--</view>-->
						<view class="list-item-activity-btn-cancle"
							v-if="getRemainingTimeToTimestamp(it.reservation.actitveEndTime) === 0 && it.reservation_type != 1"
							style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
							已结束
						</view>
						<view class="list-item-activity-btn list-item-activity-btn-cancle"
							v-if="it.reservation_type == 1" @click.stop="cancle(it.id)">
							取消报名
						</view>
					</template>
				</view>
				<view class="list-item-score" v-if="it.time_axis && it.type == 2">
					<view class="list-item-score-list">
						<view>成绩：<text>{{ it.time_axis.total_rod_number_sum }}</text></view>
						<view>距离：<text>{{ it.time_axis.max_distance_avg }}</text></view>
						<view>上球道：<text>{{ it.time_axis.fairway_hit_rate_percent }}</text></view>
					</view>
					<view class="list-item-score-list">
						<view>上果岭：<text>{{ it.time_axis.green_in_regulation_rate_percent }}</text></view>
						<view>界外球：<text>{{ it.time_axis.out_of_bounds_count_sum }}</text></view>
						<view>下水数：<text>{{ it.time_axis.water_hazard_rate_percent }}</text></view>
						<view>沙坑数：<text>{{ it.time_axis.sand_trap_rate_percent }}</text></view>
					</view>
					<view class="list-item-score-list">
						<view>切杆数：<text>{{ it.time_axis.chip_shots_sum }}</text></view>
						<view>推杆数：<text>{{ it.time_axis.putts_sum }}</text></view>
					</view>
				</view>


				<view class="list-item-time">
					<view>
						<u-tag text="审核中" plain size="mini" type="warning" v-if="it.status == 2"></u-tag>
						<u-tag text="驳回" plain size="mini" type="error" v-if="it.status == 3"></u-tag>
					</view>

					<text style="margin-left: 30rpx;">{{ $u.timeFormat(it.add_time, 'yyyy年mm月dd日') }}</text>
				</view>
				<view class="list-item-footer">
					<view @click.stop="likeRquest(it)">
						<image :src="it.like_type == 1 ? ossUrl + `/static/18.png` : ossUrl + `/static/17.png`" mode="">
						</image>
						{{ it.like_count || 0 }}
					</view>
					<view>
						<image :src="ossUrl + `/static/22.png`" mode=""></image>
						{{ it.message_count || 0 }}
					</view>
					<view @click.stop="sendMessage(it.user_id)" v-if="Friend_Status == 1">
						<image :src="ossUrl + `/static/24.png`" mode=""></image>
						私信
					</view>
					<view v-else></view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import lsSkeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import videoVue from './video/video.vue';
	import {
		convertToTimestamp,
		getRemainingTimeToTimestamp
	} from '@/common/time.js'
	import countDownVue from '../../components/countDown.vue';
	import {
		InformationCircleList,
		InformationApplication,
		InformationCancellation,
		InformationLike,
		i_joined_circle_list,
		circle_recently,
		recently_visited_circle,
		InformationLogDetails
	} from '@/common/http/api.js'
	import {openMap, goMap} from '@/common/map.js'
	import identityAvatarVue from '@/components/identity-avatar/identity-avatar.vue';
	export default {
		components: {
			countDownVue,
			lsSkeleton,
			videoVue,
			identityAvatarVue
		},
		props: {
			data: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				list: [],
				Friend_Status: 1, //是否好友  1好友 2不是
				loading: true,
				skeleton: [
					'news',
					'news',
					'news',
					'news',
					'news',
				],
			}
		},
		onLoad() {

		},
		watch: {
			data(val) {

				this.list = val

				setTimeout(() => {
					this.loading = false
				}, 100)

			}
		},
		methods: {
			getRemainingTimeToTimestamp,
			goMap,
			opencompany(it){
				console.log('this.user', this.user)
				const itemList = [
					'导航',
					'复制地址'
				]
				uni.showActionSheet({
					itemList,
					success: res => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						const name = itemList[res.tapIndex]
						switch (name){
							case '导航':
								if(!(it.reservation.latitude && it.reservation.longitude)) return this.$u.toast('暂不支持！')
								this.goMap({latitude: it.reservation.latitude ,longitude: it.reservation.longitude, name: it.reservation.address})
								break;
							case '复制地址':
								this.copy(it.reservation.address)
								break;
							default:
								break;
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			setPhone(phoneNumber){
				uni.makePhoneCall({
					phoneNumber
				});
			},
			toOhter(id){
				console.log('id', id)
				uni.navigateTo({
					url:'/pages/index/other?isBackHome=2&shareId=' + id
				})
				
			},
			//暂停播放其他视频 播放视频
			play(it) {
				
				let currentId = 'video-' + it.id; // 获取当前视频id

				// 获取视频列表
				let trailer = this.list.filter(i=> {
					return i.upload.length > 0 ? this.$getIsImage(i.upload[0]) === 2 : false
				});
				console.log('播放视频trailer', trailer)
				trailer.forEach((item, index) => { // 获取json对象并遍历, 停止非当前视频
					if(item.id != it.id) {
						if(this.$refs['videoVue' + item.id]) {
							this.$refs['videoVue' + item.id][0].$refs.VideoVueRef.pause()
						}
					}
				})
			},
			/**
			 * ref填充数据
			 * @param {Object} list 数据
			 */
			render(list) {
				console.log('list=>', list)
				this.loading = false
				this.list = this.list.concat(list)
			},
			reload() {
				this.list = []
			},
			sendMessage(id) {
				uni.navigateTo({
					url: '/pagesA/wxChat/wxChat?id=' + id
				})
			},
			toDetail(id) {
				uni.showLoading()
				InformationLogDetails({id, page: 1}).then(res=>{
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/circle/detail?id=' + id
					})
				})
			},
			likeRquest(it) {

				//uni.showLoading()
				InformationLike({
					id: it.id
				}).then(res => {
					//this.reload()
					if (it.like_type === 1) {
						it.like_type = 2
						if (it.like_count > 0) {
							it.like_count--
						}
					} else {
						it.like_type = 1
						it.like_count++
					}
				})
			},
			getImgCount(arr) {
				let count = 0
				try {
					arr.forEach(i => {
						if (this.$getIsImage(i) === 1) {
							count++
						}
					})
				} catch (e) {

				}
				return count
			},
			getPrevImg(arr, item) {

				let img = []
				arr.forEach(i => {
					if (this.$getIsImage(i) === 1) {
						img.push(i)
					}
				})
				let count = 0
				img.forEach((i, index) => {
					if (i === item) {
						count = index
					}
				})

				this.MpreviewImage(img, count)
			},
			copy(name) {
				if (name) {
					uni.setClipboardData({
						data: name,
						success: function() {
							uni.showToast({duration:3000,
								title: "已复制!",
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({duration:3000,
						title: "暂无内容复制！"
					})
				}

			},
			toPeople(id) {
				uni.navigateTo({
					url: '/pagesA/eventRegistration/eventRegistration?id=' + id
				})
			},
			cancle(id) {
				uni.showLoading()
				InformationCancellation({
					id
				}).then(res => {
					this.$refs.paging.reload();
					uni.showToast({duration:3000,
						title: '取消成功',
						icon: 'none'
					})
				}).finally(err => {
					uni.hideLoading()
				})
			},
			sendMessage(id) {
				uni.navigateTo({
					url: '/pagesA/wxChat/wxChat?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.barTitle {
		width: 100%;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #292639;
	}

	.list {
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}

		.list-item {
			width: 100%;
			background: #FFFFFF;
			border-bottom: 12rpx solid #f6f7f8;

			box-sizing: border-box;
			padding: 48rpx 30rpx 28rpx;
			position: relative;

			&-btn {
				font-size: 24rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
			}

			.list-item-t {
				display: flex;
				align-items: center;
				margin-bottom: 25rpx;
			}

			.list_item-img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.list_item-header {
				min-width: 0;
				flex: 1;
				margin-left: 28rpx;

				.list_item-header-h {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.list_item-header-h-l {

						margin-bottom: 16rpx;
						flex: 1;
						min-width: 0;
						display: flex;

						.list_item-header-h-name {
							word-break: break-all;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							margin-right: 35rpx;
							flex: 1;
							min-width: 0;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}


					}

					.list_item-header-h-r {
						padding: 12rpx 18rpx;
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 24rpx;
						color: #999999;
						background: #F6F7F8;
						height: fit-content;
						transform: translateY(-8rpx);
						margin-left: 5rpx;
					}
				}

				.list_item-header-time {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 22rpx;
					color: #999999;
					display: flex;

				}
			}

			.list-item-content {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #211C1E;
				margin-bottom: 30rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
			}

			.course {

				width: 100%;
				margin-bottom: 35rpx;

				.course-list {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-gap: 10rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				// .course-list-item+.course-list-item {
				// 	margin-left: 12rpx;
				// }

				.course-list-item {
					min-width: 0;
					background: #F6F7F8;

					.course-list-item-header {

						height: 184rpx;
						position: relative;
						background: #fbfbfb;

						.course-list-item-header-video {}

						.course-list-item-header-play {
							position: absolute;
							right: 17rpx;
							bottom: 9rpx;
							width: 40rpx;
							height: 40rpx;
						}

						.realShooting-nums {
							position: absolute;
							right: 1rpx;
							bottom: 11rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
							background: rgba(0, 0, 0, 0.4);
							border-radius: 21rpx;
							min-width: 93rpx;
							height: 41rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.course-list-item-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #292B3B;
						margin-bottom: 14rpx;
						box-sizing: border-box;
						padding: 0 7rpx;
					}

					.course-list-item-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						padding: 0 7rpx;
						padding-bottom: 7rpx;

						.course-list-item-footer-status {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #FF8400;
						}

						.course-list-item-footer-nums {
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #292B3B;

							image {
								width: 19rpx;
								height: 15rpx;
								margin-right: 11rpx;
							}
						}
					}
				}

				.course-list-item:last-child {
					// border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					.course-list-item-header {
						// border-top-right-radius: 20rpx;
						border-bottom-right-radius: 20rpx;

						.course-list-item-header-video {
							// border-top-right-radius: 20rpx;
							border-bottom-right-radius: 20rpx;
						}
					}
				}

				/* 如果当前元素是前三个中的一个，并且它是最后一个子元素或后面没有超过3个子元素 */

				/* 当 .course-list-item 总数 <= 3 时，选中每个子元素 */
				/* 当 .course-list-item 总数 <= 3 且是最后一个子元素时，添加圆角 */
				.course-list-item:nth-child(-n+3):last-child {
					border-top-right-radius: 20rpx;

					.course-list-item-header {
						border-top-right-radius: 20rpx;

						.course-list-item-header-video {
							border-top-right-radius: 20rpx;

						}
					}
				}
			}

			.list-item-activity {
				width: 100%;
				margin-bottom: 22rpx;

				.list-item-activity-crad {
					background: #F6F7F8;
					border-radius: 33rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 22rpx;
					margin-bottom: 25rpx;

					.list-item-activity-crad-item {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						display: flex;
						// align-items: center;
						margin-bottom: 33rpx;
						
						&>text {
							font-weight: bold;
						}

						view {
							width: 47rpx;
							height: 51rpx;
							background: #FFFFFF;
							border-radius: 12rpx;
							border: 2px solid #DBDFE1;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #211C1E;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 8rpx;
						}
					}

					.list-item-activity-crad-item:last-child {
						margin-bottom: 0;
					}

				}

				.list-item-activity-people {
					width: 100%;
					margin-bottom: 41rpx;

					.list-item-activity-people-title {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #211C1E;
						margin-bottom: 31rpx;
					}

					.nums {
						width: 100%;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 40rpx;
						display: flex;
						align-items: center;
						margin: 0 auto;
						margin-bottom: 24rpx;

						.nums-img {
							//padding-left: 36rpx;
							min-width: 0;
							flex: 1;
							display: flex;
							align-items: center;

							image {
								width: 56rpx;
								height: 56rpx;
							}

							// 定义变量，设置循环次数
							$num-items: 10;

							// 循环生成样式
							@for $i from 1 through $num-items {
								image:nth-child(#{$i}) {
									transform: translateX($i * -6rpx);
								}
							}
						}

						.nums-tx {
							// width: 130rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #211C1E;
						}
					}
				}

				.list-item-activity-btn {
					width: 170rpx;
					height: 66rpx;
					background: #12B475;
					border-radius: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-bottom: 22rpx;
				}

				.list-item-activity-btn-cancle {
					width: 170rpx;
					height: 66rpx;
					background: #fff;
					border: 1px solid #12B475;
					border-radius: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #12B475;
					margin-bottom: 22rpx;
				}
			}

			.list-item-footer {
				padding-top: 24rpx;
				box-sizing: border-box;
				padding: 24rpx 24rpx 0;
				border-top: 1rpx solid #D7D7D7;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>view {
					display: flex;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 7rpx;
					}
				}
			}
		}
	}

	.list-item-score {
		background: #F6F7F8;
		border-radius: 33rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 22rpx;
		margin-bottom: 25rpx;

		.list-item-score-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			view {
				margin-right: 10rpx;
				font-size: 22rpx;

				text {
					color: #12B475;
				}
			}
		}
	}

	.list-item-footer {

		&>view {
			display: flex;
			align-items: center !important;
		}
	}

	.list-item-score {
		padding-bottom: 0 !important;

		.list-item-score-list {
			align-items: none;
			flex-wrap: wrap;
			margin-bottom: 0rpx !important;

			view {
				margin-right: 30rpx;
				padding-bottom: 22rpx;
			}
		}
	}

	.list-item-time {
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 22rpx;
		color: #999999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.barTitle {
		position: relative;

		//box-shadow: 0px 10px 10px #666666;
		.icon {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: rotateY(-50%);
			margin: auto;
		}
	}

	.list-video {
		margin-bottom: 20rpx;
	}

	.list_item-header-h-address {
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #7A7A7A;
		width: fit-content;
		height: fit-content;
		padding-top: 5rpx;

		image {
			margin-right: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>